<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Kodi</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="styles/reset.css" />
        <link rel="stylesheet" href="styles/text.css" />

        <link rel="stylesheet" href="styles/960.css" />
        <link rel="stylesheet" href="styles/kodi.css" />
        <link rel="stylesheet" href="styles/loginModal.css"/>

        <script src="scripts/jquery-1.6.2.js"></script>
        <script src="scripts/Ant-ChangeDivContent.js"></script>
        <script src="scripts/Ant-TabHandler.js"></script>
        <script src="scripts/generateTable.js"></script>

        <script src="scripts/modal.js"></script>
        <script src="scripts/tableRowCheckboxToggle.js"></script>
        <script type="text/javascript" src="scripts/jquery-ui-1.8.custom.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.cookie.js"></script>


        <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>

        <script type="text/javascript">
            google.load("jquery", "1");
            google.load("jqueryui", "1");
            tableRowCheckboxInit();
        </script>
    </head>
    <body onLoad="switchToDiv('main_content_wrapper', 'content_home');generateInitialData();">

        <div class="container_12">



            <div id="sidebar_left" class=" grid_4">
            <!--SIDEBAR LEFT BEGIN-->
            <!-- MAIN NAVIGATION BEGIN-->

            <div id="main_nav_bar">

                <div id="btn_home" class=" tab active_tab grid_4" onClick="switchToDiv('main_content_wrapper', 'content_home'); switchTab('main_nav_bar', 'btn_home')">
                    <p>Home</p>
                </div>
                <div id="btn_inventory" class=" tab grid_4" onClick="switchToDiv('main_content_wrapper', 'content_inventory'); switchTab('main_nav_bar', 'btn_inventory'); displayAll(1)">
                    <p>Inventory</p>
                </div>

                 <div id="inventory_secondary_nav_bar" class="secondary_nav_bar">
            <div id="btn_inventory_search" class=" tab_sec grid_4" onClick="drawerSwitch('inventory_slideout_drawer', 'content_inventory_search'); switchTab('inventory_secondary_nav_bar', 'btn_inventory_search'); ">
                <p>Search</p>   <!--CHRIS: Insert Search fields and filters here -->
            </div>
            <div id="btn_inventory_create" class=" tab_sec grid_4" onClick="drawerSwitch('inventory_slideout_drawer', 'content_inventory_create'); switchTab('inventory_secondary_nav_bar', 'btn_inventory_create');">
                <p>Create</p> <!-- CHRIS: Insert Creation fields here-->
            </div>

            <div id="btn_inventory_order" class=" tab_sec grid_4" onClick="drawerSwitch('inventory_slideout_drawer', 'content_inventory_order');  switchTab('inventory_secondary_nav_bar', 'btn_inventory_order');generateList();">
                <p>Order</p>
            </div>
        </div>
                <div id="btn_delivery" class=" tab grid_4" onClick="switchToDiv('main_content_wrapper', 'content_delivery');  switchTab('main_nav_bar', 'btn_delivery');">
                    <p>Delivery</p>
                </div>
                <!--<div id="btn_home" class=" button grid_2">
                <p>Home</p>
                </div>-->

            </div>
            <!-- MAIN NAVIGATION END-->
            <div id="calender">
                <img src="images/calendar.jpeg" width="245" height="232">
            </div>
            <!--SIDEBAR LEFT END-->
</div>
            <div id="main_wrapper" class="grid_8">

                <!-- MAIN CONTENT WRAPPER -->

                <div id="main_content_wrapper" class=" grid_8 alpha">

                </div>

            </div>

            <!-- end .grid_12 -->
		<div id="footer" class=" grid_12">
                <p>
                    Footer
                </p>

            </div>
        </div>
        <!-- end .container_12 -->

    </body>

    <!-- Hidden Divs -->
    <!-- Home BEGIN-->
    <div id="content_home" class="hidden">

        <div id="main_content">
            <div id="notifications_wrapper" class="grid_8 alpha ">
                <span class="title">Notifications</span>
                <div class="notifications_category">
                    <span class="title">Inventory Notifications	</span>

                    <table class="notifications_table">
                        <tr class="title_row">

                            <!---->
                            <td class="title">Title</td> <td colspan="3">Actions</td>
                        </tr>
                        <tr class="notification_row ">
                            <td class="title" colspan="3">Loan Request: Total Station (2)</td><td class="action"><a name="modal" href="#loan_request" onClick="modal(this);tableRowCheckboxInit();" ><img src="images/dropdown-arrow.png" width="30" height="32"></a></td>
                        </tr>
                        <tr class="notification_row ">

                            <td class="title" colspan="3">Sales Request: Total Station (2)</td><td class="action"><a name="modal" href="#sales_request" onClick="modal(this);tableRowCheckboxInit();" ><img src="images/dropdown-arrow.png" width="30" height="32"></a></td>
                        </tr>
                        <tr class="notification_row ">
                            <td class="title">Restock Inventory: Total Station</td><td class="action value"><input type="text" class="notification_textbox" value="1"></td><td class="action cfm"><input type="button" value="confirm"></td><td class="action more"><img src="images/dropdown-arrow.png" width="30" height="32"></td>
                        </tr>
                        <tr class="notification_row ">
                            <td class="title">Restock Inventory: Total Station</td><td class="action"><input type="text" class="notification_textbox" value="1"></td><td class="action"><input type="button" value="confirm"></td><td class="action"><img src="images/dropdown-arrow.png" width="30" height="32"></td>

                        </tr>
                    </table>
                </div>

            </div>
        </div>

    </div>
    <!-- Notification Popups-->
    <div id="boxes">

        <div id="mask"></div>
        <div id="loan_request" class="window">
            <!--
            MIKE: Add the Loan request table here,
            1. Note: Table needed "LOANS"
            Create a table for Loans that include 5-8 items. Fields: Type, Brand, Model, Serial
            2. Must be able to filter to 3 options
 	All loan items, none preselected
	All loan items, preselected
	Only preselected
            3. Note: Table needed "Notification"
            Clicking Confirm removes Notification entry

            SIMON: Make these fields selectable and limited to 2(i.e if 2 rows are selected the user cannot select more until he deselects 1)

            Layout is as seen in the static demo

            -->
            <h2>Loan Request</h2>
            <h1>Company: Simon Teo PTE LTD</h1>
            Item Requested: Total Station<br>
            Number of Items Requested: 2<br>

            <table id="loan_request_table" class="dataTable">
                <tr>
                    <td class="loan_request_table_type">Type</td><td class="loan_request_table_brand">Brand</td><td class="loan_request_table_model">Model</td><td class="loan_request_table_serial">Serial</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme1" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">NPL350</td><td class="loan_request_table_serial">50283</td>

                </tr>
                <tr class="even_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme2" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3030R</td><td class="loan_request_table_serial">140299</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme3" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3030R</td><td class="loan_request_table_serial">142221</td>

                </tr>
                <tr class="even_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme4" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3CII</td><td class="loan_request_table_serial">28960</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme5" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 4CII</td><td class="loan_request_table_serial">14308</td>

                </tr>
            </table>
            <span class="table_counter"><span style="text-decoration:underline" id="rowcountloans">0</span><span style="text-decoration:underline">/2</span> Loan Items selected. </span>
            <div class="action_buttons_bottom">

                <input type="button" value="Confirm" class="close"><input type="button" value="Cancel" class="close">

                <div id="index"></div>

                <div id="excludeCheckboxesWithName"></div>
                <div id="excludeCheckboxesWithId"></div>
                <div id="excludeCheckboxesWithClass"></div>
            </div>
        </div>
        <!-- Loan Request Modal END -->
        <!-- Sales Request Modal BEGIN-->
        <div id="sales_request" class="window">
            <a href="#" class="close">Close it</a>

            <h2>Sales Request</h2>
            <h1>Company: Simon Teo PTE LTD</h1>
            Item Requested: Total Station<br>
            Number of Items Requested: 2<br>
            <table id="loan_request_table" class="dataTable">
                <tr>

                    <td class="loan_request_table_type">Type</td><td class="loan_request_table_brand">Brand</td><td class="loan_request_table_model">Model</td><td class="loan_request_table_serial">Serial</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme6" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">NPL350</td><td class="loan_request_table_serial">50283</td>
                </tr>

                <tr class="even_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme7" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3030R</td><td class="loan_request_table_serial">140299</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme8" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3030R</td><td class="loan_request_table_serial">142221</td>

                </tr>
                <tr class="even_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme9" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 3CII</td><td class="loan_request_table_serial">28960</td>
                </tr>
                <tr class="odd_row">
                    <td class="loan_request_table_type"><input type="checkbox" id="checkme10" hidden/>Total Station</td><td class="loan_request_table_brand">Sokkia</td><td class="loan_request_table_model">SET 4CII</td><td class="loan_request_table_serial">14308</td>

                </tr>
            </table>
            <div class="action_buttons_bottom">
                <span style="text-decoration:underline" id="rowcountsales">0</span><span style="text-decoration:underline">/2</span> Items selected.
                <input type="button" value="Confirm" class="close"><input type="button" value="Cancel" class="close">
            </div>
        </div>
        <!-- Sales Request Modal END-->

    </div>
    <!-- Notification Popups END-->
    <!-- Home END-->

    <!-- Inventory BEGIN -->
    <div id="content_inventory" class="hidden" onClick="dynamicTable("all", 1)">


        <div id="drawer" >
            <div id="inventory_slideout_drawer" class="secondary_slideout_drawer " style="display:none;">
                <p>slideout</p>

            </div>
        </div>

        <!-- Inventory Main Content BEGIN-->
        <div id="inventory_table_wrapper">
            <!-- CHRIS: Insert Search Results/Inventory Table here-->
            <table>
            </table>
        </div>

        <!-- Inventory Main Content END-->
    </div>
</div>

<!-- Secondary Slide out content BEGIN -->

<div id="content_inventory_search" class="hidden">
    <select id="type" size="9" multiple="multiple" name="type" onclick="filter(this.value, 1)">
        <option selected="selected" value="---">--- </option>
        <option value="Drill">Drill</option>

        <option value="Nails">Nails</option>
        <option value="Cardboards">Cardboards</option>
        <option value="BeamX">BeamX</option>
    </select>


    <select id="model" size="9" multiple="multiple" name="model" onclick="filter(this.value, 1)">
        <option selected="selected" value="---">--- </option>

        <option value="Toshiba">Toshiba </option>
        <option value="Alex">Alex</option>
        <option value="Woodie">Woodie</option>
        <option value="Metal Station">Metal Station </option>
    </select>


    <select id="brand" size="9" multiple="multiple" name="brand" onclick="filter(this.value, 1)">

        <option selected="selected" value="---">--- </option>
        <option value="M1234">M1234</option>
        <option value="N20">N20</option>
        <option value="W-132">W-132</option>
        <option value="B-2131">B-2131</option>

    </select>

    <p> Search: <input type="text" id="search" name="search" onKeyUp="filter(this.value, 1)"/><input type="button" value="reset" onClick="resetCombo()"> </p>
</div>


<div id="content_inventory_create" class="hidden">
    <form action="" method="post" >
        <table style="margin-left:auto; margin-right:auto; height: 180px; position:relative; top: 80px;">
            <tr>
                <td style="text-align:right"><label>Type : </label></td><td><input type="text" name="type_text" id="type_text"></td>

            </tr><tr>
                <td style="text-align:right"><label>Brand : </label></td><td><input type="text" name="brand_text" id="brand_text"></td>
            </tr><tr>
                <td style="text-align:right"><label>Model : </label></td><td><input type="text" name="model_text" id="model_text"></td>
            </tr><tr>
                <td style="text-align:right"><label>Serial : </label></td><td><input type="text" name="serial_text" id="serial_text"></td>
            </tr><tr>

                <td style="text-align:right"><label>Quantity : </label></td><td><input type="text" name="quantity_text" id="quantity_text"></td>
            </tr><tr>
                <td colspan="2" style="text-align:center;"><input type="button" value="Add" onclick="addInputs(this.form,1)"></td>
            </tr>
        </table>
    </form>
</div>


<div id="content_inventory_order" class="hidden">

    <div id="recentorder">

    </div>
    <form action="" method="post" >

        <table style="margin-left:auto; margin-right:auto; height: 180px; position:relative; top: 80px;">
            <tr>
                <td style="text-align:right"><label>Type : </label></td><td><input type="text" name="type_text" id="type_text"></td>
            </tr><tr>
                <td style="text-align:right"><label>Brand : </label></td><td><input type="text" name="brand_text" id="brand_text"></td>

            </tr><tr>
                <td style="text-align:right"><label>Model : </label></td><td><input type="text" name="model_text" id="model_text"></td>
            </tr><tr>
                <td style="text-align:right"><label>Quantity : </label></td><td><input type="text" name="quantity_text" id="quantity_text"></td>
            </tr><tr>
                <td colspan="2" style="text-align:center;"><input type="button" value="Place Order" onclick="addInputs(this.form,2)"></td>
            </tr>
        </table>

    </form>
</div>

<!-- Secondary Slide out content END -->


<!-- Inventory END -->

<!-- Delivery BEGIN -->


<div id="content_delivery" class="hidden">
    <div id="example-2-1">
        <div class="column left first"><b>Jobs</b>

            <ul class="sortable-list">
                <li class="sortable-item" id="A">Job A - Hougang</li>
                <li class="sortable-item" id="B">Job B - Jurong</li>
                <li class="sortable-item" id="C">Job C - Mandai</li>
                <li class="sortable-item" id="D">Job D - AMK</li>
                <li class="sortable-item" id="E">Job E - Woodlands</li>

            </ul>

        </div>
        <div class="column left">Driver Enzo Ferrari
            <ul class="sortable-list">
            </ul>

        </div>

        <div class="column left">Driver Ferruccio Lamborghini
            <ul class="sortable-list">

            </ul>

        </div>

    </div>


</div>
</div>






</div>

<!-- Example JavaScript files -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>

<!-- Example jQuery code (JavaScript)  -->
<script type="text/javascript">

    function dynamicDragDropInit(){

        // Get items
        function getItems(exampleNr)
        {
            var columns = [];

            $(exampleNr + ' ul.sortable-list').each(function(){
                columns.push($(this).sortable('toArray').join(','));
            });

            return columns.join('|');
        }

        // Load items from cookie
        function loadItemsFromCookie(name)
        {
            if ( $.cookie(name) != null )
            {
                renderItems($.cookie(name));
            }
            else
            {
                alert('No items saved in "' + name + '".');
            }
        }

        // Render items
        function renderItems(items)
        {
            var html = '';

            var columns = items.split('|');

            for ( var c in columns )
            {
                html += '<div class="column left';

                if ( c == 0 )
                {
                    html += ' first';
                }

                html += '"><ul class="sortable-list">';

                if ( columns[c] != '' )
                {
                    var items = columns[c].split(',');

                    for ( var i in items )
                    {
                        html += '<li class="sortable-item" id="' + items[i] + '">Sortable item ' + items[i] + '</li>';
                    }
                }

                html += '</ul></div>';
            }

            $('#example-2-4-renderarea').html(html);
        }

        // Example 2.1: Get items
        $('#example-2-1 .sortable-list').sortable({
            connectWith: '#example-2-1 .sortable-list'
        });


        $('#btn-get').click(function(){
            alert(getItems('#example-2-1'));
        });


        // Example 2.2: Save items
        $('#btn-save').click(function(){
            $.cookie('cookie-a', getItems('#example-2-1'));

            alert('Items saved (' + $.cookie('cookie-a') + ')');
        });

        // Example 2.3: Save items automaticly
        $('#example-2-3 .sortable-list').sortable({
            connectWith: '#example-2-3 .sortable-list',
            update: function(){
                $.cookie('cookie-b', getItems('#example-2-3'));
            }
        });


        // Example 2.4: Load items
        $('#btn-load-example').click(function(){
            renderItems(getItems('#example-2-1'));
        });

        $('#btn-load-cookie-a').click(function(){
            loadItemsFromCookie('cookie-a');
        });

        $('#btn-load-cookie-b').click(function(){
            loadItemsFromCookie('cookie-b');
        });

    };

</script>
</div>

<!-- Delivery END -->


</html>